<template>
    <div class="wrapper">
        <div class="header">
            <div class="logo">
                <!--<img src="../assets/images/logo.png" class="logo-img" height="18" alt="quick clip">-->
            </div>

            <div class="project-box">
                <!--<div class="user" @click="logout" title="退出">-->
                    <!--<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40"-->
                         <!--enable-background="new 0 0 40 40" xml:space="preserve">-->
                            <!--<path fill="none" stroke="#BABABA" stroke-width="2" stroke-linecap="round"-->
                                  <!--stroke-linejoin="round" d="M26.4,14.1-->
                                <!--C28,15.7,29,18,29,20.5c0,5-4,9-9,9s-9-4-9-9c0-2.4,1-4.6,2.5-6.2"></path>-->
                        <!--<line fill="none" stroke="#BABABA" stroke-width="2" stroke-linecap="round"-->
                              <!--stroke-linejoin="round" x1="20" y1="10.6" x2="20" y2="17.8"></line>-->
                        <!--</svg>-->
                <!--</div>-->
            </div>
        </div>
        <div class="main">
            <div class="middle-wrap">
                <div class="left-menu">
                    <vue-scroll>
                    <div class="left-menu-item" :class="[_id == item._id? 'active': '']"
                         v-for="(item, index) in attachmentList"
                         @click="menuHandle(item._id, index)">{{item.title}}
                    </div>
                    </vue-scroll>
                </div>
                <div class="content">
                    <div class="left">
                        <div class="player-box" id="volcano_player"></div>
                    </div>
                    <div class="right">
                        <div class="list-wrap">
                            <vue-scroll>
                                <div class="audio-item" v-for="(item, index) of audioList"
                                     @click="audioHandle(index, item._id, $event)" :class="[audioActiveIndex == index? 'active': '']">
                                    <span>{{item.alias}}</span>
                                    <div v-if="item.alias ==='截短'">
                                        {{item.time_start | secondToTime}} - {{item.time_end | secondToTime}}
                                    </div>
                                    <div v-else>{{item.duration}}</div>
                                    <div class="del-btn">
                                        删除
                                    </div>
                                </div>
                            </vue-scroll>
                        </div>
                    </div>
                </div>
                <div class="handler-box">
                    <div class="change-area">
                        <div class="tab-btn" :class="[curTab === 'truncation'? 'active': '']"
                             @click="tabHandle('truncation')">截短
                        </div>
                        <div class="tab-btn" :class="[curTab === 'dot'? 'active': '']" @click="tabHandle('dot')">打点
                        </div>
                    </div>

                    <div class="dot-area" v-show="curTab==='truncation'">
                        <div class="video-time" ref="currentTimeDurationDom">
                            00:00 / 00:00
                        </div>
                        <div class="timeline">
                            <canvas id="time_line"></canvas>
                        </div>

                        <v-button :inline="true" :width="'56'" :height="'38'"
                                  @click="returnAudio()">原音频
                        </v-button>
                    </div>
                    <v-button v-show="isShowBtn" :inline="true" :width="'70'" :height="'38'" @click="submitTruncation()"
                              :disabled="submitBtn"
                              style="background-color: #eea236; float: right;">放入工作台
                    </v-button>
                    <div class="input-area" v-show="curTab==='dot'">
                        <div class="video-time" ref="currentTimeDom">
                            00:00
                        </div>
                        <v-input v-model="labelText" :width="'530px'" :size="'large'"
                                 style="float: left; margin-right: 10px"></v-input>
                        <v-button :inline="true" :width="'70'" :height="'38'"
                                  style="background-color: #eea236; float: left; margin-right: 15px"
                                  @click="setLabel()">保存
                        </v-button>
                        <v-button :inline="true" :width="'46'" :height="'38'" v-show="curTab==='dot'"
                                  @click="removeLabel()">删除
                        </v-button>
                    </div>
                </div>

                <div class="button-handle">
                    <v-button :inline="true" :width="'80'" :height="'38'" style="margin-right: 10px"
                              :class="[soundEffect.increaseVol === 1?'active': '']"
                              @click="soundEffectHandle('increaseVol')">增大音量
                    </v-button>
                    <v-button :inline="true" :width="'80'" :height="'38'" style="margin-right: 10px"
                              :class="[soundEffect.dnr === 1?'active': '']"
                              @click="soundEffectHandle('dnr')">降噪
                    </v-button>
                    <v-button :inline="true" :width="'80'" :height="'38'" style="margin-right: 10px"
                              :class="[soundEffect.enhanceVoice === 1?'active': '']"
                              @click="soundEffectHandle('enhanceVoice')">增强人声
                    </v-button>
                    <v-button :inline="true" :width="'80'" :height="'38'" style="margin-right: 10px"
                              :class="[soundEffect.ignoreBlank === 1?'active': '']"
                              @click="soundEffectHandle('ignoreBlank')">跳过空白
                    </v-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import vuescroll from 'vuescroll';
    import VInput from '../components/common/v-input'
    import VButton from '../components/common/v-button'

    export default {
        name: 'home',
        components: {
            VButton, VInput
        },
        data() {
            return {
                _id: '',
                card_id: '',
                attachmentList: [],
                attachmentActive: null,
                player: null,
                playerStatus: 'waiting',
                timeCaliper: null,
                curTab: 'truncation',
                curList: 'truncation',
                audioList: [],
                dotList: [],
                audioActiveIndex: null,
                imagesList: [],
                selectStartTime: 0,
                selectEndTime: 0,
                activeLabelTime: 0,
                currentTime: 0,
                labelText: '',
                currentTimeDurationDom: null,
                currentTimeDom: null,
                isLabelAdd: true,
                soundEffect: {
                    increaseVol: 0,
                    dnr: 0,
                    enhanceVoice: 0,
                    ignoreBlank: 0
                },
                submitBtn: false,
                isInitAudio: true,
                isShowBtn: true
            }
        },
        methods: {
            tabHandle(cur) {
                this.curTab = cur
                if (cur === 'dot') {
                    this.timeCaliper.clearSelectArea()
                    this.selectStartTime = 0
                    this.selectEndTime = 0
                    this.isShowBtn = false
                } else {
                  this.isShowBtn = true
                }
            },
            listTabHandle(cur) {
                this.curList = cur
            },
            /**
             * 音效
             */
            soundEffectHandle(type) {
                let that = this
                switch (type) {
                    case 'increaseVol':
                        that.soundEffect.increaseVol = that.soundEffect.increaseVol == 0 ? 1 : 0
                        break
                    case 'dnr':
                        that.soundEffect.dnr = that.soundEffect.dnr == 0 ? 1 : 0
                        break
                    case 'enhanceVoice':
                        that.soundEffect.enhanceVoice = that.soundEffect.enhanceVoice == 0 ? 1 : 0
                        break
                    case 'ignoreBlank':
                        that.soundEffect.ignoreBlank = that.soundEffect.ignoreBlank == 0 ? 1 : 0
                        break
                    default :
                }
                console.log(that.soundEffect)

            },

            submitEffect() {
                let that = this
                that.$toasted.info('音效处理中...')
                let params = {
                    _id: that._id,
                    increaseVol: that.soundEffect.increaseVol,
                    dnr: that.soundEffect.dnr,
                    enhanceVoice: that.soundEffect.enhanceVoice,
                    ignoreBlank: that.soundEffect.ignoreBlank
                }
                that.$axios.post('/workbenchadmin/audio/operate', params).then(function (res) {
                    console.log(res)
                    let videoInfo = {
                        filepath: res.data.filepath,
                        time_start: that.secondToTime(that.selectStartTime),
                        time_end: that.secondToTime(that.selectEndTime),
                        duration: that.secondToTime(that.player.audio.duration),
                        alias: '音效处理'
                    }
                    that.audioList.unshift(videoInfo)
                    that.$toasted.success('音效处理成功')
                    that.submitBtn = false
                }).catch(function (err) {
                    console.log(err)
                    that.submitBtn = false
                    that.$toasted.error('音效处理失败')
                })
            },
            /**
             * 提交截取
             */
            submitTruncation() {

                let that = this
                if (this.selectStartTime == 0 && this.selectEndTime == 0) {
                    if (that.soundEffect.increaseVol !== 0 || that.soundEffect.dnr !== 0 || that.soundEffect.enhanceVoice !== 0 || that.soundEffect.ignoreBlank !== 0) {
                        that.submitBtn = true

                        that.submitEffect()
                        return
                    }

                }

                if (this.selectStartTime == 0 && this.selectEndTime == 0) return that.$toasted.error('请选择截取区间')

                console.log(this.selectStartTime, this.selectEndTime)
                let params = {
                    _id: that._id,
                    time_start: this.selectStartTime,
                    time_end: this.selectEndTime
                }
                that.$axios.post('/workbenchadmin/audio/clip', params).then(function (res) {
                    console.log(res)
                    let videoInfo = {
                        filepath: res.data.filepath,
                        time_start: that.selectStartTime,
                        time_end: that.selectEndTime,
                        _id: res.data._id,
                        alias: '截短'
                    }
                    that.audioList.unshift(videoInfo)
                    that.timeCaliper.clearSelectArea()
                    that.selectStartTime = 0
                    that.selectEndTime = 0
                    that.truncationListIndex = null
                    if (that.soundEffect.increaseVol == 0 && that.soundEffect.dnr == 0 && that.soundEffect.enhanceVoice == 0 && that.soundEffect.ignoreBlank == 0) {
                        return
                    }
                    that.submitEffect()
                }).catch(function (err) {
                    console.log(err)
                })
            },

            /**
             * 播放控制
             */
            audioHandle(index, id, event) {
                let that = this
                if (event.target.className === 'del-btn') {
                    let r = confirm('确认删除吗？')
                    if(r){
                        that.delClipAudioDelete(id)
                    }
                } else {
                    that.isInitAudio = false
                    let url = this.audioList[index].filepath
                    that.audioActiveIndex = index
                    that.player.label.remove(that.dotList)

                    that.player.loadVideo({
                        url: url,
                        title: that.audioList[index].title
                    })
                    that.player.on('canplay', () => {
                        that.player.play()
                    })
                }
            },
            delClipAudioDelete(id) {
                let that = this
                that.$axios.post('/workbenchadmin/audio/clipDelete', {
                    _id: id,
                    card_id: that.card_id
                }).then(function (res) {
                    if (res.status == 0) {
                        for (let i = 0; i < that.audioList.length; i++) {
                            if (that.audioList[i]._id == id) {
                                that.audioList.splice(i, 1)
                            }
                        }
                        that.player.loadVideo({
                            url: '',
                            title: ''
                        })
                        that.player.label.remove(that.dotList)
                        that.$toasted.success('删除成功')
                    } else {
                        that.$toasted.error('error')
                    }
                }).catch(function (err) {
                    console.log(err)
                    that.$toasted.error('ERROR')
                })
            },
            returnAudio() {
                this.isInitAudio = true
                this.audioActiveIndex = null
                this.player.loadVideo({
                    url: this.audioUrl
                })
            },

            menuHandle(id, index) {
                this._id = id
                this.attachmentActive = index
                let url = window.location.origin + '?_id=' + this._id + '&card_id=' + this.card_id
                history.pushState({}, '', url)
                this.getUrl()
            },
            /**
             * 设置打点
             */
            setLabel() {
                let that = this
                if (this.labelText === '') {
                    return this.$toasted.show('请输入打点内容')
                }
                let obj = {}
                if (this.isLabelAdd) {
                    obj.time = this.currentTime
                    obj.text = this.labelText
                    that.$axios.post('/workbenchadmin/audio/dot', {
                        _id: that._id,
                        gmt: obj.time,
                        content: obj.text
                    }).then(function (res) {
                        if (res.status == 0) {
                            that.player.label.set(obj)
                            that.labelText = ''
                            that.activeLabelTime = ''
                            that.isLabelAdd = true
                        } else {
                            that.$toasted.error('error')
                        }

                    }).catch(function (err) {
                        console.log(err)
                        that.$toasted.error('ERROR')
                    })

                } else {
                    obj.time = this.activeLabelTime
                    obj.text = this.labelText
                    that.$axios.post('/workbenchadmin/audio/dotEdit', {
                        _id: that._id,
                        gmt: obj.time,
                        content: obj.text
                    }).then(function (res) {
                        if (res.status == 0) {
                            that.player.label.set(obj)
                            that.labelText = ''
                            that.activeLabelTime = ''
                            that.isLabelAdd = true
                        } else {
                            that.$toasted.error('error')
                        }

                    }).catch(function (err) {
                        console.log(err)
                        that.$toasted.error('ERROR')
                    })
                }

                console.log(this.selectStartTime, this.selectEndTime)

            },
            /**
             * 移除打点
             */
            removeLabel() {
                let that = this
                that.$axios.post('/workbenchadmin/audio/dotDelete', {
                    _id: that._id,
                    gmt: that.activeLabelTime
                }).then(function (res) {
                    if (res.status == 0) {
                        that.player.label.remove(that.activeLabelTime)
                        that.labelText = ''
                        that.activeLabelTime = ''
                        that.isLabelAdd = true
                    } else {
                        that.$toasted.error('error')
                    }
                }).catch(function (err) {
                    that.$toasted.error('ERROR')
                })
            },
            /**
             * 获取地址
             */
            getUrl() {
                let that = this
                let params = {
                    _id: that._id,
                    card_id: that.card_id
                }
                that.$axios.post('/workbenchadmin/audio', params).then(function (res) {
                    console.log(res)
                    let tempDots = []
                    for (let item of res.data.dots) {
                        let obj = {
                            time: item.gmt,
                            text: item.content
                        }
                        tempDots.push(obj)
                    }
                    that.dotList = tempDots
                    that.audioList = res.data.clip_audios
                    that.audioUrl = res.data.filepath
                    that.attachmentList = res.data.attachment_list || []
                    that.player.loadVideo({
                        url: res.data.filepath,
                        title: res.data.title
                    })
                }).catch(function (err) {
                    console.log(err)
                    that.$toasted.error('获取失败')
                })
            },
            /**
             * 截图
             */
            screenshot() {
                let that = this
                let params = {
                    uuid: '',
                    clipTime: this.currentTime
                }
                that.$axios.post('/taskadmin/image/clip', params).then(function (res) {
                    console.log(res)
                }).catch(function (err) {
                    that.$toasted.error('图片截取失败')
                })
            },
            drawImg() {
                this.player.drawImg('')
            },
            logout() {
                window.location.href = '/admin/sign/out'
            },
            secondToTime(second) {
                const add0 = (num) => num < 10 ? '0' + num : '' + num
                const hour = Math.floor(second / 3600)
                const min = Math.floor((second - hour * 3600) / 60)
                const sec = Math.floor(second - hour * 3600 - min * 60)
                return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':')
            },
            getQueryString(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        },
        filters: {
            secondToTime(second) {
                const add0 = (num) => num < 10 ? '0' + num : '' + num
                const hour = Math.floor(second / 3600)
                const min = Math.floor((second - hour * 3600) / 60)
                const sec = Math.floor(second - hour * 3600 - min * 60)
                return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':')
            }
        },
        mounted() {
            let that = this
            that.$nextTick(() => {
                that._id = that.getQueryString('_id')
                that.card_id = that.getQueryString('card_id')

                let options = {
                    container: document.querySelector('#volcano_player'),
                    audio: {
                        url: 'http://ckplayer.iyumweb.com/爱啦啦.mp3',
                        poster: '',
                        title: 'AUDIO PLAYER CC v0.0.1'
                    },
                    autoplay: false
                }
                let timeCaliperOption = {
                    canvas: '#time_line',
                    width: 476,
                    getSelectArea: (obj) => {
                        // console.log(obj)
                        that.selectStartTime = obj.startTime
                        that.selectEndTime = obj.endTime
                    },
                    getSelectTime: (time) => {
                        // console.log(time)
                        that.selectStartTime = 0
                        that.selectEndTime = 0
                    },
                    seek: (time) => {
                        console.log(time)
                        that.player.seek(time)
                    }
                }

                that.player = new window.AudioPlayer(options)
                that.timeCaliper = new TimeCaliper(timeCaliperOption)

                that.currentTimeDom = that.$refs.currentTimeDom
                that.currentTimeDurationDom = that.$refs.currentTimeDurationDom

                that.player.on('loadedmetadata', () => {

                    console.log(that.secondToTime(that.player.audio.duration))
                    that.currentTimeDurationDom.innerText = that.secondToTime(that.player.audio.currentTime) + ' / ' + that.secondToTime(that.player.audio.duration)
                    that.timeCaliper.clearTimeStick()
                    that.timeCaliper.draw(that.player.audio.duration)
                    that.player.label.on('click', (info) => {
                        that.isLabelAdd = false
                        that.activeLabelTime = info.time
                        that.labelText = info.text
                    })
                    // init打点数据
                    if (that.isInitAudio) {
                        that.player.label.set(that.dotList)
                    }

                })

                that.player.on('playing', () => {
                    that.playerStatus = 'playing'
                })

                that.player.on('waiting', () => {
                    that.playerStatus = 'waiting'
                })

                that.player.on('pause', () => {
                    that.playerStatus = 'pause'
                })

                that.player.on('timeupdate', () => {
                    if (that.selectEndTime) {
                        if (that.player.audio.currentTime > that.selectEndTime) {
                            that.player.audio.currentTime = that.selectStartTime
                        }
                    }
                    if (that.playerStatus === 'playing') {
                        that.timeCaliper.timeupdate(that.player.audio.currentTime)
                    }

                    that.currentTime = that.player.audio.currentTime
                    that.currentTimeDom.innerText = that.secondToTime(that.player.audio.currentTime)
                    if (isNaN(that.player.audio.duration)) return
                    that.currentTimeDurationDom.innerText = that.secondToTime(that.player.audio.currentTime) + ' / ' + that.secondToTime(that.selectEndTime === 0 ? that.player.audio.duration : that.selectEndTime)
                })

                that.player.on('playerready', () => {
                    //获取地址
                    that.getUrl()
                })

                that.player.on('canplay', () => {
                    if (that.curTab === 'dot') return
                    that.player.play()
                })

                that.player.audio.addEventListener('seeked', () => {
                    if (that.curTab === 'dot') {
                        that.player.pause()
                    }
                })

                that.player.label.on('click', (info) => {
                    that.isLabelAdd = false
                    that.activeLabelTime = info.time
                    that.labelText = info.text
                })
            })
        }
    }
</script>

<style lang="scss">
    @import "../assets/common/styles/variables.scss";
    @import "../assets/common/styles/mixin.scss";

    /*global*/
    .module {
        .module-title {
            height: 30px;
            line-height: 30px;
            color: $color-font-master;
            font-size: $fontsize-small;

            .active {
                color: $color-font-active;
            }

            span {
                display: inline-block;
                padding: 0 18px;
                height: 30px;
                background-color: $color-background-master;
            }
        }
    }

    .tabs {
        width: 100%;
        font-size: $fontsize-small;
        color: $color-font-master;
        @include clearfix();

        .tab {
            position: relative;
            float: left;
            display: inline-block;
            cursor: pointer;

            span {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                padding: 0 18px;
                cursor: pointer;
                background-color: transparent;

                &:hover {
                    color: $color-font-active;
                }

            }

            &.active {
                color: $color-font-active;
                background-color: $color-background-master;

                &::after {
                    position: absolute;
                    bottom: 0;
                    left: 15%;
                    display: inline-block;
                    content: '';
                    width: 70%;
                    height: 2px;
                    border-radius: 2px;
                    background: $color-background-light-s;
                }
            }
        }
    }

    .date-picker-input {
        display: inline-block;
        width: 158px;
        height: 28px;
        line-height: 28px;
        align-items: center;
        text-align: center;
        font-size: $fontsize-small;
        color: $input-color;
        border: 1px solid #333;
        background-color: $input-bgc;
        outline: none;
    }

    .mx-input-append {
        background-color: transparent;
    }

    .mx-calendar-icon {
        color: $color-font-master;
    }

    /*layout*/
    .wrapper {
        position: relative;
        width: 100%;
        min-width: 1280px;
        height: 100%;
        background-color: $color-background-dark;
        overflow: hidden;
    }

    .header {
        height: 40px;
        background: $color-background-master;
        border: 2px solid $color-background-dark;
        border-top: 0;
        box-sizing: border-box;

        .logo {
            height: 40px;
            float: left;
        }

        .logo-img {
            margin-top: 10px;
            margin-left: 6px;
        }

        .project-box {
            text-align: right;
            width: 660px;
            height: 40px;
            float: right;
            padding-right: 20px;
        }

        .layout {
            position: relative;
            display: inline-block;
            width: 116px;
            line-height: 38px;
            vertical-align: top;
            text-align: left;
            border-right: 1px solid $color-border-master;

            .layout-icon {
                position: absolute;
                top: 12px;
                left: 0;
                width: 16px;
                height: 16px;
            }

            .layout-text {
                font-size: 12px;
                color: $color-font-master;
                padding: 0 10px 0 25px;
            }

            .layout-arrow {
                width: 10px;
            }
        }

        .network-status {
            display: inline-block;
            width: 40px;
            height: 40px;
            overflow: hidden;
            text-align: center;
            vertical-align: top;
        }

        .message {
            display: inline-block;
            width: 40px;
            height: 40px;
            overflow: hidden;
            text-align: center;
            vertical-align: top;
        }

        .user {
            display: inline-block;
            line-height: 38px;
            cursor: pointer;
            margin-left: 12px;

            svg {
                width: 32px;
                height: 40px;
                vertical-align: top;
            }

            span {
                font-size: 12px;
                color: $color-font-master;
            }
        }
    }

    .left-wrap, .middle-wrap, .right-wrap, .bottom-wrap {
        border: 2px solid $color-background-dark;
        background-color: $color-background-master;
    }

    .middle-wrap {
        position: relative;

        .content {
            background-color: #000;
            border-bottom: 2px solid #000;
            @include clearfix;
        }

        .left {
            width: 810px;
            float: left;
        }

        .right {
            width: 214px;
            float: left;
        }
    }
    .del-btn {
        position: absolute;
        right: 6px;
        bottom: 6px;
        color: #fff;
        font-size: 12px;
        width: 38px;
        height: 26px;
        text-align: center;
        line-height: 26px;
    }
    .main {
        position: relative;
        height: calc(100% - 40px);
    }

    .middle-wrap {
        width: 1152px;
        height: 100%;
        margin: 0 auto;
    }

    .left-menu {
        float: left;
        width: 128px;
        height: 458px;
    }

    .left-menu-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 6px;
        font-size: 14px;
        color: #fff;
        background-color: #333333;
        margin-bottom: 4px;
        cursor: pointer;
        word-wrap: break-word;
        overflow: hidden;

        &.active {
            background: rgb(238, 162, 54);
        }
    }

    .player-box {
        width: 100%;
        height: 456px;
        overflow: hidden;
        background-color: #000;
    }

    .handler-box {
        padding: 10px 20px;
        box-sizing: border-box;
        @include clearfix;

        .change-area {
            width: 100px;
            float: left;
            text-align: center;
            background-color: #0f0f0f;

            .tab-btn {
                width: 50px;
                float: left;
                font-size: 12px;
                height: 38px;
                line-height: 38px;
                color: $color-font-master;
                cursor: pointer;

                &.active {
                    background-color: rgb(238, 162, 54);
                    color: $color-font-active;
                }
            }
        }
    }

    .button-handle {
        padding: 10px 20px;
        box-sizing: border-box;
        @include clearfix;

        .active {
            background-color: rgb(238, 162, 54);
        }
    }

    .input-area {
        width: 760px;
        float: left;
        margin-right: 20px;

        .video-time {
            width: 80px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            float: left;
            font-size: 12px
        }
    }

    .dot-area {
        width: 770px;
        float: left;
        margin-right: 20px;

        .video-time {
            width: 130px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            float: left;
            font-size: 12px;
        }

        .timeline {
            width: 476px;
            height: 38px;
            float: left;
            margin-right: 16px;
            background-color: #0f0f0f;
            opacity: .7;
        }
    }

    .btn-area {
        width: 96px;
        float: left;

        button {
            margin-right: 6px !important;
        }
    }

    .list-wrap {
        height: 456px;

        .audio-item {
            position: relative;
            width: 200px;
            height: 62px;
            margin: 0 auto 5px;
            background-color: #272727;
            border: none;
            cursor: pointer;
            padding: 10px;
            box-sizing: border-box;
            color: $color-font-master;
            font-size: $fontsize-small;

            &.active {
                background-color: rgb(238, 162, 54);
                color: $color-font-light-s;
            }

            span {
                font-size: $fontsize-medium;
                display: block;
                margin-bottom: 5px;


            }
        }
    }

    .preTab {
        height: 32px;
        line-height: 26px;
        color: $color-font-master;
        font-size: 12px;

        span {
            display: inline-block;
            margin: 0 10px;
            padding: 0 4px;
            border-bottom: 2px solid transparent;
            box-sizing: border-box;
            cursor: pointer;

            &:hover {
                color: $color-font-active;
            }

            &.active {
                color: $color-font-active;
                border-bottom: 2px solid $color-font-active;
            }
        }
    }

</style>
